<template>
  <div class="notice">
    <Card style="margin-top: 25px">
    <Row>
      <Col span="6" >
        <Card>
          您好，欢迎光临!
        </Card>
        <List header="公告/活动" border size="small" style="text-align: center">
          <div v-for="note in noteData">
            <ListItem>{{ note.answer }}<Badge text="热" ></Badge></ListItem>
          </div>
        </List>
      </Col>
      <Col span="18">
          <div id="myChart" style="width: 100%;height: 400px">

          </div>
      </Col>
    </Row>
    </Card>
  </div>
</template>

<script>
  // import echarts from 'echarts'
  import axios from "axios";

  export default {
    name: "notice",
    data() {
     return {
       data: [],
       count:[],
       timeArr:[],
       valueArr:[],
       bQSearch:{
         show:0,
         textType:1
       }  ,
       noteData:{},
     }
    },
    mounted(){
      this.getCount()
      this.getData()
    },
    components: {
      // echarts
    },
    methods: {

      getData(){
        axios.get("http://localhost:8888/otherController/queryPQ",{params:this.bQSearch}).then(res => {
          this.noteData = res.data.list
        })
      },
      getCount(){
        axios.get('http://localhost:8888/otherController/getCountSum').then(res => {
          if (res && res.status == 200){
               this.count = res.data
            this.initEchartsV();
          }else {
            this.$Message.error('流量查询失败!');
          }
        })
      },
      initEchartsV(){
        this.valueArr = [];
        this.timeArr = [];
        if (this.count!=null && this.count.length>0){
          for (let i=0;i<this.count.length;i++){
            this.valueArr.push(this.count[i].count);
            this.timeArr.push(this.count[i].date.split("00:00:00")[0]);
          }
        }
        this.drawLine();
      },
      drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            title: {
              text: '流量统计'
            },
            xAxis: {
              type: 'category',
              data: this.timeArr
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: this.valueArr,
              type: 'line',
              smooth: true
            }]
        })
      }
    },
  }
</script>

<style scoped>
 .notice{
   margin:20px 0 0 20px
 }
</style>
